<template>
	<view class="" style="padding-bottom: 110rpx;">
		<view class="img">
			<image style="width:100%;height:100%;" mode="widthFix" :src="Goodsitem.goodsImg"></image>
		</view>
		<!-- <view class="goods">{{Goodsitem.goodsName}}</view> -->
		<view class="goods_price">
			<text>{{number.oneparsePrice(Goodsitem.price)}}积分</text>
			<!-- <text>快递：{{number.oneparsePrice(Goodsitem.freight || "0")}}元</text> -->
			<text></text>
		</view>

		<view class="goods_num">
			<view class="font_small">{{Goodsitem.goodsName}}</view>
			<view>
				<u-number-box v-model="goodsNum" @change="goodsNumChange" :min="1"></u-number-box>
			</view>
		</view>
        
        <!-- 购买选项 - Tab 样式 -->
		<view class="goods_tips">
			<view :class="[type==item.id?'tips_item_selected':'tips_item_unselected']" 
                  v-for="(item,index) in Goodsdata" 
                  :key="index"
                  @click="typeofs(item)">
				{{item.name}}
			</view>
            <!-- 重新添加下划线 -->
			<view class="tabs-line" :style="{left:lineLeft}"></view>
		</view>
        
        <!-- 兑换对象选择（仅在向盟友购买时显示） -->
        <view v-if="type === '1'" class="ally-select-box" @click="selectAlly">
            <view class="ally-select-title">兑换对象</view>
            <view class="ally-select-content">
                <text v-if="selectedAlly" class="ally-name">{{ selectedAlly.name }}</text>
                <text v-else class="ally-placeholder">请选择兑换对象</text>
                <image class="arrow-icon" src="/static/img/index/ic_next_black.png" mode=""></image>
            </view>
        </view>

		<view class="goods_detail">
			兑换方式
		</view>
		<view class="" style="margin-top: 10px;">
			<u-radio-group v-model="value" @change="radioGroupChange" style="width: 100%;">
				<view class="DH_type-box">
					<view class="DH_type-box-item" v-for="(item,index) in list" :key="index">
						<u-radio @change="radioChange" :name="item.id">
							{{item.name}}
						</u-radio>
						<text></text>
					</view>
				</view>
			</u-radio-group>
		</view>
		<view class="goods_detail" v-if="value == '1'">
			邮寄地址
		</view>
		<view class="YG-adder" v-if="value == '1'" @click="selectAddr">
			<view class="" v-if="addredata.id">
				{{addredata.detailAddress}}
			</view>
			<view class="YG-adder-text" v-else>请选择邮寄地址</view>
			<view class="YG-adder-img">
				<image src="/static/img/index/ic_next_black.png" mode=""></image>
			</view>
		</view>
		<!-- <view class="goods_detail_concent">
			<rich-text :nodes="Goodsitem.goodsDetailInfo"></rich-text>
		</view> -->

		<view class="goods_detail_footer">
			<view class="sumber">共计使用{{proAmount}}积分</view>
			<view class="queren" @click="confimDH">确认兑换</view>
		</view>
		<!-- <u-popup v-model="show" mode="bottom"> ... </u-popup> -->
	</view>
</template>

<script>
	import number from "../../../utils/number.js";
	const api = require('../../../config/api');
	const util = require('../../../utils/util');
	export default {
		data() {
			return {
				number: number, //声明number属性并赋值为引入的number模块
				goodsId: '',
				Goodsdata: [ // 更新为两个选项
                    { id: '0', name: '向总部购买' },
                    { id: '1', name: '向盟友购买' },
                ],
				Goodsitem: {},
				type: '0', // 默认选中"向总部购买"
                selectedAlly: null, // 新增：存储选中的盟友信息
				proAmount: 0,
				show: false,
				goodsNum: 1,
				list: [ // 兑换方式选项
                    { id: '0', name: '当面兑换' },
                    { id: '1', name: '快递邮寄兑换' }
                ],
				value: '0', // 默认选中"当面兑换"
				DHform: {
					"addressId": null,
					"goodId": 0,
					"mailingAddress": "",
					"methodExchange": "", // 这个字段似乎与 `value` 重复，可能需要整合
					"quantity": 0,
                    "purchaseType": "0", // 新增：区分购买类型 0-总部 1-盟友
                    "allyId": null, // 新增：盟友ID
				},
				addredata: {}
			}
		},
		onLoad(o) {
			this.goodsId = o.goodsId
			this.getGoodsdetail();
		},
		onShow() {
			uni.$off('selectOtherAddr');
			uni.$on('selectOtherAddr', data => {
				console.log('选择的地址:', data);
				this.addredata = data.item
			});
            
            // 监听选择盟友事件 (假设盟友选择页面会触发 'selectAllyEvent')
            uni.$off('selectAllyEvent'); 
            uni.$on('selectAllyEvent', data => {
                console.log('选择的盟友:', data);
                this.selectedAlly = data.ally; // 假设返回的数据结构是 { ally: { id: xxx, name: 'xxx' } }
            });
		},
		methods: {
            // 新增：跳转到盟友选择页面
            selectAlly() {
                uni.navigateTo({ url: '/pages/indexChild/RedeGoodsDetails/SelectAlly' });
                // 在盟友列表页选择后，需要触发 uni.$emit('selectAllyEvent', { ally: selectedAllyData });
            },

			async confirmationExchange() {
                // 更新 DHform 中的购买类型和盟友ID
                this.DHform.purchaseType = this.type; // '0' 或 '1'
                this.DHform.allyId = this.type === '1' && this.selectedAlly ? this.selectedAlly.id : null;
                this.DHform.methodExchange = this.value; // 使用 value (0或1) 表示兑换方式

				const res = await util.request(
					api.confirmationExchangeUrl, 
                    { ...this.DHform },
					'POST'
				);
				console.log('兑换请求结果:', res);
				if (res.code !== 0) {
					uni.showToast({ title: res.msg, icon: "none" });
				} else {
					uni.showToast({ title: '提交成功', icon: "none" });
                    // 可以在这里添加成功后的跳转逻辑，例如返回上一页或跳转到订单列表
                    setTimeout(() => uni.navigateBack(), 1500);
				}
			},
			selectAddr() {
				uni.navigateTo({
					url: '/pages/address/addressManager?selectMode=true', // 添加参数以区分是选择地址模式
					events: {
						// selectOtherAddr: (data) => { // events 似乎在新版uni-app中不推荐直接写逻辑
						// 	console.log(data.item);
						// },
					},
					success: (res) => {
						// success 回调中 eventChannel 仍然可用
						res.eventChannel.emit('acceptDataFromOpenerPage', { data: '选择地址' })
					}
				})
			},
			radioChange(e) {
				// console.log('radio change:', e);
			},
			radioGroupChange(e) {
				// console.log('radio group change:', e);
				// this.type = e // 注意：这里之前是修改 type，现在兑换方式由 value 控制，type 控制购买对象
                this.value = e; // 直接更新兑换方式 v-model 的值
			},
			// goPay() { ... }, // 注释掉或移除，当前未使用
			confimDH() {
                // 校验：如果是向盟友购买，必须选择盟友
                if (this.type === '1' && !this.selectedAlly) {
                    uni.showToast({ title: '请选择兑换对象（盟友）', icon: 'none' });
                    return;
                }

                // 校验：如果是快递邮寄，必须选择地址
				if (this.value == '1' && !this.addredata.id) {
                    uni.showToast({ title: '请选择邮寄地址', icon: 'none' });
                    return;
                }
                
                // 准备提交的数据
                this.DHform.goodId = this.goodsId;
                this.DHform.quantity = this.goodsNum;
                // purchaseType 和 allyId 在 confirmationExchange 内部根据 this.type 和 this.selectedAlly 设置
                // methodExchange 在 confirmationExchange 内部根据 this.value 设置
                
                if (this.value == '1') { // 如果是快递邮寄
                    this.DHform.addressId = this.addredata.id;
                    this.DHform.mailingAddress = this.addredata.detailAddress;
                } else { // 如果是当面兑换，清除地址信息
                    this.DHform.addressId = null;
                    this.DHform.mailingAddress = "";
                }

                this.confirmationExchange(); // 发起请求
			},
			goodsNumChange(e) {
				// console.log('数量改变: ' + e.value);
				this.proAmount = (this.Goodsitem.price * e.value).toFixed(2)
			},
			// toOrderList() { ... }, // 注释掉或移除
            
			// 修改购买选项（总部/盟友）
			typeofs(item) {
				console.log('切换购买选项:', item);
				this.type = item.id; // 更新选中的购买类型 '0' 或 '1'
                // 如果切换回"向总部购买"，清空已选盟友
                if (this.type === '0') {
                    this.selectedAlly = null; 
                }
				// this.Goodsitem = item // 这个逻辑似乎不应该在这里，Goodsitem是商品本身，不应随购买方式改变
			},
			async getGoodsdetail() {
				const res = await util.request(
					api.getIntegralGoodsDetailUrl + '/' + this.goodsId, {},
					'POST'
				);
				console.log('获取商品详情:', res);
				if (res.code !== 0) {
					uni.showToast({ title: res.msg, icon: "none" });
				} else {
					this.Goodsitem = res.data;
					this.proAmount = (res.data.price * this.goodsNum).toFixed(2);
				}
			},
		},
		computed: {
            // 计算tab下划线的位置
            lineLeft() {
                // 假设两个tab均匀分布，计算大致中心位置
                // 需要根据实际渲染后的宽度微调
                return this.type === '0' ? '25%' : '75%'; 
            }
        },
	}
</script>

<style lang="scss" scoped>
	.img {
		width: 100%;
	}

	.goods { // 这个类未使用，可以移除
		margin-left: 15px;
		margin-right: 15px;
		margin-top: 10px;
		font-size: 16px;
	}

	.goods_price {
		padding: 20rpx 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #FF6100;
		font-size: 30rpx;
		border-bottom: 1rpx solid #f7f7f7;
	}

	.goods_price>text:first-child {
		font-weight: 600;
		font-size: 32rpx;
	}
    
    .goods_num { // 商品名称和数量选择器行
        padding: 20rpx 32rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1rpx solid #f7f7f7;
        .font_small { // 商品名称
            font-size: 30rpx; 
            color: #333;
            flex: 1; // 占据更多空间
            margin-right: 20rpx; // 与数量选择器间距
        }
    }

	.goods_tips { // 购买选项容器 - Tab 样式
		padding: 20rpx 32rpx 10rpx 32rpx; // 减少底部 padding
		display: flex;
		align-items: center;
        justify-content: space-around; // 均匀分布
		position: relative;
        border-bottom: 1rpx solid #f7f7f7;
        background-color: #fff; // 背景色

		.tips_item_selected { // 选中状态 - 仅改变文字颜色/粗细
            padding: 15rpx 20rpx; // 调整内边距
			text-align: center;
			color: #6A9FFB; // 主题色
			font-size: 30rpx; 
            font-weight: 600; // 加粗
            position: relative; // 为了可能的 ::after 伪元素 (如果需要更复杂的下划线)
            z-index: 2; // 确保在下划线之上
		}

		.tips_item_unselected { // 未选中状态
            padding: 15rpx 20rpx; // 调整内边距
			text-align: center;
			color: #666; // 默认颜色
			font-size: 30rpx;
             position: relative;
             z-index: 2;
		}
        
        // Tab 下划线样式
		.tabs-line {
			z-index: 1;
			position: absolute;
			bottom: 0; // 紧贴父容器底部
			width: 60rpx; // 下划线宽度 (可调整)
			height: 6rpx; // 下划线高度
			left: 50%; // 由 computed property 动态设置
			transform: translateX(-50%); // 水平居中
			border-radius: 3rpx;
			transition: left .3s; // 平滑过渡效果
			background: #6A9FFB; // 下划线颜色 (主题色)
		}
	}
    
    .ally-select-box { // 兑换对象选择区域
        padding: 20rpx 32rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1rpx solid #f7f7f7;
        background-color: #fff; // 背景色
        min-height: 80rpx; // 最小高度
        
        .ally-select-title {
            font-size: 28rpx;
            color: #333;
            font-weight: 600;
        }
        
        .ally-select-content {
            display: flex;
            align-items: center;
            color: #999; // 默认文字颜色
            font-size: 28rpx;
            
            .ally-name { // 选中盟友名称
                color: #333; // 选中时颜色深一些
                margin-right: 10rpx; 
            }
            .ally-placeholder { // 提示文字
                 margin-right: 10rpx;
            }
            
            .arrow-icon { // 右箭头图标
                width: 16rpx;
                height: 28rpx; // 根据实际图标调整
            }
        }
    }


	.goods_detail { // Section 标题 (兑换方式/邮寄地址)
		font-size: 28rpx; // 调整字号
		padding: 20rpx 32rpx 10rpx 32rpx; // 调整内边距
		font-weight: 600;
        color: #333;
	}
    
    .DH_type-box { // 兑换方式单选框容器
        display: flex;
        align-items: center;
        justify-content: space-around; // 均匀分布
        padding: 10rpx 32rpx 20rpx 32rpx; // 内边距
        border-bottom: 1rpx solid #f7f7f7;
        
        .DH_type-box-item {
            flex: 1; // 每个选项占一半空间
            display: flex;
            align-items: center;
            justify-content: center; // 居中显示
        }
    }

	.goods_detail_concent { // 这个类未使用，可以移除
		margin-top: 10px;
		padding: 10px;
		overflow-x: hidden;
		padding-bottom: 50px;
	}

	.goods_detail_footer { // 底部确认栏
		position: fixed;
		bottom: 0;
		left: 0; // 确保占满宽度
		right: 0; // 确保占满宽度
		width: 100%;
		height: 100rpx; // 调整高度
        padding: 0 32rpx; // 左右内边距
		display: flex;
		align-items: center;
		justify-content: space-between;
        background-color: #fff; // 背景色
        border-top: 1rpx solid #eee; // 顶部加条线
        box-sizing: border-box; // 防止 padding 撑开宽度

		.sumber { // 总积分
			color: #FF5B5B;
			font-size: 28rpx;
			font-weight: 600;
		}

		.queren { // 确认按钮
			background-color: #6A9FFB; // 主题色
			width: 240rpx; // 调整宽度
			height: 70rpx; // 调整高度
			color: #fff;
			font-size: 30rpx; // 调整字号
			text-align: center;
			line-height: 70rpx; // 与高度一致垂直居中
			border-radius: 35rpx; // 圆角
		}
	}

	// .product_size { ... } // 移除或注释掉未使用的 popup 相关样式
	// .goods_details { ... }
	// .goods_name>text { ... }
	// .confirm { ... }

	.font_small { // 已合并到 .goods_num 中
		// font-size: 30rpx;
	}

	.YG-adder { // 邮寄地址选择区域
		padding: 20rpx 32rpx; // 调整内边距
		margin-top: 0; // 移除顶部外边距
		display: flex;
		align-items: center;
		justify-content: space-between;
        border-bottom: 1rpx solid #f7f7f7; // 添加下边框
        min-height: 80rpx; // 最小高度

		.YG-adder-text { // 提示文字
			font-size: 28rpx;
			color: #A4A4A4;
            margin-right: 10rpx; // 与箭头间距
		}
        
        view:first-child { // 显示地址的 view
            font-size: 28rpx;
            color: #333;
            flex: 1; // 占据多余空间
            margin-right: 10rpx; // 与箭头间距
            overflow: hidden; // 防止地址过长溢出
            text-overflow: ellipsis;
            white-space: nowrap;
        }

		.YG-adder-img { // 箭头容器
			width: 16rpx; // 调整大小
			height: 28rpx; // 调整大小
            display: flex; // 确保图片垂直居中（如果需要）
            align-items: center;

			image {
				height: 100%;
				width: 100%;
			}
		}
	}
</style>